<template>
  <div class="w-full min-h-screen bg-gray-50">
    <div class="py-16">
      <div class="max-w-4xl mx-auto px-4">
        <div class="text-center mb-12">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">
            <i class="fas fa-info-circle text-blue-500 mr-3"></i>
            关于我们
          </h1>
          <p class="text-xl text-gray-600">
            专业的 Markdown 工具平台，让文档创作更简单高效
          </p>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-8 mb-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">
            <i class="fas fa-rocket text-blue-500 mr-2"></i>
            项目简介
          </h2>
          <p class="text-gray-600 leading-relaxed mb-6">
            Markdown 工具箱是一个专业的在线文档转换平台，致力于为用户提供高效、便捷的 Markdown 文档处理服务。
            我们支持将 Markdown 文档转换为思维导图、流程图、PPT 演示文稿、HTML 网页等多种格式，
            满足不同场景下的文档展示需求。
          </p>
          <p class="text-gray-600 leading-relaxed">
            平台采用现代化的 Web 技术栈构建，界面简洁美观，操作简单直观。
            无论您是技术开发者、产品经理、还是内容创作者，都能在这里找到适合的工具来提升工作效率。
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">
              <i class="fas fa-bullseye text-green-500 mr-2"></i>
              我们的使命
            </h3>
            <p class="text-gray-600">
              让每个人都能轻松创建美观、专业的文档和演示内容，
              通过技术的力量降低内容创作的门槛，提升工作和学习效率。
            </p>
          </div>

          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">
              <i class="fas fa-eye text-purple-500 mr-2"></i>
              我们的愿景
            </h3>
            <p class="text-gray-600">
              成为最受欢迎的 Markdown 工具平台，
              为全球用户提供最优质的文档处理服务，
              推动知识分享和协作的发展。
            </p>
          </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-8 mb-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">
            <i class="fas fa-star text-yellow-500 mr-2"></i>
            核心特性
          </h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-bolt text-blue-500 text-2xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-2">实时预览</h4>
              <p class="text-sm text-gray-600">即时查看转换效果，所见即所得的编辑体验</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-mobile-alt text-green-500 text-2xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-2">响应式设计</h4>
              <p class="text-sm text-gray-600">完美适配各种设备，随时随地使用</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-download text-purple-500 text-2xl"></i>
              </div>
              <h4 class="font-semibold text-gray-900 mb-2">多格式导出</h4>
              <p class="text-sm text-gray-600">支持 SVG、PNG、JPG、PDF 等多种格式</p>
            </div>
          </div>
        </div>

        <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-8 text-white text-center">
          <h2 class="text-2xl font-bold mb-4">
            <i class="fas fa-heart mr-2"></i>
            开源项目
          </h2>
          <p class="mb-6">
            本项目完全开源，欢迎开发者参与贡献。
            我们相信开源的力量能让工具变得更好。
          </p>
          <div class="flex justify-center space-x-4">
            <a 
              href="https://gitee.com/MorningJack/marktool" 
              target="_blank"
              class="bg-white text-blue-600 px-6 py-2 rounded-lg hover:bg-gray-100 transition-colors"
            >
              <i class="fab fa-github mr-2"></i>
              查看源码
            </a>
            <a 
              href="#" 
              class="border border-white text-white px-6 py-2 rounded-lg hover:bg-white hover:text-blue-600 transition-colors"
            >
              <i class="fas fa-bug mr-2"></i>
              反馈问题
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 关于页面组件
</script> 